<template>
	<view class="home">
		<statusBar></statusBar>
		<logo></logo>
		<view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red"><img src="../../../static/img/home/banner1.png" /></view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green"><img src="../../../static/img/home/banner2.png" /></view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue"><img src="../../../static/img/home/banner3.png" /></view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="home-nav">
			<view class="home-nav-in" @click="goPractice">
				<img src="../../../static/img/home/lianxi.png" />
				<text>在线练习</text>
			</view>
			<view class="home-nav-in" @click="goPracticeZjyt">
				<img src="../../../static/img/home/yati.png" />
				<text>终极押题</text>
			</view>
			<view class="home-nav-in" @click="goPracticeQzmn">
				<img src="../../../static/img/home/moni.png" />
				<text>全真模拟</text>
			</view>
			<view class="home-nav-in" @click="goCuoti">
				<img src="../../../static/img/home/cuoti.png" />
				<text>我的错题</text>
			</view>
		</view>
		<view style="height:10px;background-color: #f2f2f2;"></view>
		<view class="course">
			<view class="newcourse">
				<view class="coursetitle">最新课程</view>
				<view class="coursecontent">
					<view class="courselist" v-for="(item, index) in newSubject" @click="goStudyVideo(item.ResourceId)" :key="index">
						<view class="courselistimg"><img :src="item.Thumbnail" /></view>
						<view class="courselisttext">
							<view class="courselisttitle">{{ item.ResourceName }}</view>
							<view class="courselistnum">
								<img src="../../../static/img/home/eye.png" />
								<text>{{ item.StudyCount }}人</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="hotcourse">
				<view class="coursetitle">热门课程</view>
				<view class="coursecontent">
					<view class="courselist" v-for="(item, index) in hotSubject" @click="goStudyVideo(item.ResourceId)" :key="index">
						<view class="courselistimg"><img :src="item.Thumbnail" /></view>
						<view class="courselisttext">
							<view class="courselisttitle">{{ item.ResourceName }}</view>
							<view class="courselistnum">
								<img src="../../../static/img/home/eye.png" />
								<text>{{ item.StudyCount }}人</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="morecourse"><button @click="goStudy">查看更多</button></view>
		</view>
		<view style="height:10px;background-color: #f2f2f2;"></view>

		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
		<!-- 据距考试倒计时 -->
		<uni-popup ref="popup" type="center" :show="iscd" :maskClick="false">
		   <view class="cd_div">
			<view class="cd_title">距离考试还有</view>
			<view class="cd_sumday">
				<img src="../../../static/img/home/daojishi.png" />
				<view class="cd_day">
					<view class="cd_num">1</view>
					<view class="cd_num">0</view>
				</view>
			</view>
			<view class="cd_know" @click="closecd">我知道了</view>
		   </view>
		</uni-popup>
		<!-- <view class="cd_cover">
			<view class="cd_div">
				<view class="cd_title">距离考试还有</view>
				<view class="cd_sumday">
					<img src="../../../static/img/home/daojishi.png" />
					<view class="cd_day">
						<view class="cd_num">1</view>
						<view class="cd_num">0</view>
					</view>
				</view>
				<view class="cd_know">我知道了</view>
			</view>
		</view> -->
		<!-- 版本更新 -->
		<uni-popup ref="popup" type="center" :show="isud" :maskClick="false">
		   <view class="ud_div">
		   	<view class="ud_rand">
		   		<img src="../../../static/img/home/feiji.png" />
		   	</view>
		   	<view class="ud_title">发现新版本1.1.2</view>
		   	<view class="ud_add">【新增】新增景点编辑功能</view>
		   	<view class="ud_yh">【优化】优化部分界面设计</view>
		   	<view class="ud_btn">
		   		<view class="ud_agin" @click="closeud">下次再说</view>
		   		<view class="ud_update" @click="update">立即更新</view>
		   	</view>
		   </view>
		</uni-popup>
		<!-- <view class="ud_cover">
			<view class="ud_div">
				<view class="ud_rand">
					<img src="../../../static/img/home/feiji.png" />
				</view>
				<view class="ud_title">发现新版本1.1.2</view>
				<view class="ud_add">【新增】新增景点编辑功能</view>
				<view class="ud_yh">【优化】优化部分界面设计</view>
				<view class="ud_btn">
					<view class="ud_agin">下次再说</view>
					<view class="ud_update">立即更新</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import statusBar from '@/components/status-bar.vue';
import logo from '@/components/logo.vue';
export default {
	components: {
		logo,
		statusBar
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			newSubject: [],
			hotSubject: [],
			type: '',
			iscd: false,
			isud: true
		};
	},
	created() {
		this.getVideo();
		this.getConfirmToken();
	},
	methods: {
		getVideo: function() {
			uni.request({
				method: 'GET',
				url: this.apiUrl + 'api/student/Home/GetNewVideo',
				data: {},
				success: res => {
					if (res.statusCode == 200) {
						this.newSubject = res.data.data;
						for (let i in this.newSubject) {
							this.newSubject[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.newSubject[i].Thumbnail;
						}

						if (this.newSubject.length < 1) {
							uni.reLaunch({
								url: '../../login/login'
							});
						}
					} else {
						this.msg = '未知错误';
						this.togglePopup('middle');
					}
				}
			});
			uni.request({
				method: 'GET',
				url: this.apiUrl + 'api/student/Home/GetHotVideo',
				data: {},
				success: res => {
					if (res.statusCode == 200) {
						this.hotSubject = res.data.data;
						for (let i in this.hotSubject) {
							this.hotSubject[i].Thumbnail = this.apiUrl + 'Resources/Course/' + this.hotSubject[i].Thumbnail;
						}
					} else {
						this.msg = '未知错误';
						this.togglePopup('middle');
					}
				}
			});
		},
		goPractice: function() {
			uni.setStorageSync('practivetype', 'Zjlx');
			uni.reLaunch({
				url: '../practice/practice'
			});
		},
		goPracticeZjyt: function() {
			uni.setStorageSync('practivetype', 'Zjyt');
			uni.reLaunch({
				url: '../practice/practice'
			});
		},
		goPracticeQzmn: function() {
			uni.setStorageSync('practivetype', 'Qzmn');
			uni.reLaunch({
				url: '../practice/practice'
			});
		},
		goCuoti: function() {
			uni.reLaunch({
				url: '../user/user'
			});
		},
		goStudy: function() {
			uni.reLaunch({
				url: '../study/study'
			});
		},
		goStudyVideo: function(resourceId) {
			uni.navigateTo({
				url: '../study/video/video?id=' + resourceId + ''
			});
		},
		//判断token 是否过期
		getConfirmToken: function() {
			var token = uni.getStorageSync('token');
			//从未登陆的允许查看首页
			if (token != '') {
				uni.request({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url: this.apiUrl + 'api/Login/ConfirmToken',
					success: res => {
						if (res.data.state == 'error') {
							//过期重登
							uni.reLaunch({
								url: '../../login/login'
							});
						}
					}
				});
			}
		},
		closecd(){
			this.iscd = false
		},
		closeud(){
			this.isud = false
			this.iscd = true
		},
		update(){
			//更新
			
		}
	}
};
</script>

<style scoped>
.home {
	background-color: #f2f2f2;
}
.swiper {
	height: 320upx;
}
.swiper img {
	width: 750upx;
	height: 320upx;
}
.wline {
	height: 50upx;
}
.home-nav {
	width: 100%;
	height: 220upx;
	background-color: #fff;
	display: flex;
}
.home-nav-in {
	width: 25%;
	text-align: center;
}
.home-nav img {
	width: 80upx;
	height: 80upx;
	display: block;
	margin: 60upx auto 0upx;
}
.home-nav text {
	color: #33333;
	font-size: 28upx;
}
.course {
	width: 100%;
	background-color: #ffffff;
	padding: 25upx 0upx;
}
.coursetitle {
	display: block;
	height: 28upx;
	line-height: 28upx;
	border-left: 3upx solid #27b28b;
	text-indent: 10upx;
	font-size: 28upx;
	color: #333333;
	margin-left: 28upx;
}
.coursecontent {
	width: 700upx;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.courselist {
	width: 336upx;
	height: 360upx;
	margin-top: 30upx;
}
.courselistimg {
	width: 336upx;
	height: 250upx;
}
.courselistimg img {
	width: 336upx;
	height: 250upx;
}
.courselisttext {
	border: 1upx solid #dddddd;
	height: 108upx;
	width: 332upx;
}
.courselisttext .courselisttitle {
	padding-top: 23upx;
	font-size: 24upx;
	line-height: 24upx;
	color: #666666;
	text-indent: 16upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.courselisttext .courselistnum img {
	width: 16upx;
	height: 10upx;
	margin-left: 16upx;
	margin-right: 5upx;
	vertical-align: middle;
}
.courselisttext .courselistnum text {
	font-size: 18upx;
	color: #888888;
	vertical-align: middle;
}
.hotcourse {
	padding-top: 45upx;
}
.morecourse button {
	margin: 45upx auto 25upx auto;
	width: 180upx;
	height: 60upx;
	line-height: 60upx;
	background-color: #ffffff;
	border-radius: 6upx;
	border: solid 1upx #dddddd;
	opacity: 0.66;
	font-size: 28upx;
	color: #666666;
	text-align: center;
}
/* 倒计时 */
.home >>> .uni-mask{
	z-index: 999;
	top: 0 !important;
}
.home >>> .uni-close-bottom{
	display: none;
}
.cd_div{
	width:300px;
	height:250px;
	border-radius:16px;
	background: white;
}
.cd_title{
	width: 100%;
	height:46px;
	background:rgba(39,178,139,1);
	border-radius:16px 16px 0px 0px;
	font-size:14px;
	text-align: center;
	line-height: 46px;
	color: white;
}
.cd_sumday{
	margin-top: -10px;
	text-align: center;
	position: relative;
}
.cd_sumday img{
	width: 180px;
	height: 135px;
}
.cd_sumday .cd_day{
	position: absolute;
	top: 59px;
	left: 50%;
	margin-left: -35px;
	display: flex;
	
}
.cd_sumday .cd_day .cd_num{
	/* border: 1px solid red; */
	width:34px;
	height:50px;
	text-align: center;
	line-height: 50px;
	color:rgba(0,0,0,1);
	font-size: 30px;
	margin-right: 1px;
}
.cd_know{
	text-align: center;
	color:rgba(39,178,139,1);
	font-size:14px;
	margin-top: 30px;
}
/* 新版本 */
.ud_div{
	width:300px;
	height:250px;
	border-radius:8px;
	background: white;
}
.ud_rand{
	width:73px;
	height:73px;
	margin: auto;
	background:rgba(255,255,255,1);
	border-radius: 36.5px;
	box-shadow:0px 1px 15px 0px rgba(174,174,174,0.23);
	margin-top: -36.5px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ud_rand img{
	width: 32px;
	height:51px;
}
.ud_title{
	font-size: 15px;
	color:rgba(51,51,51,1);
	text-align: center;
	margin-top: 25px;
	line-height: 50px;
}
.ud_add, .ud_yh{
	font-size: 13px;
	color:rgba(153,153,153,1);
	text-align: center;
	line-height: 30px;
}
.ud_btn{
	display: flex;
	justify-content: space-around;
	margin-top: 35px;
}
.ud_btn view{
	font-size:14px;
}
.ud_btn .ud_agin{
	color:rgba(153,153,153,1);
}
.ud_btn .ud_update{
	color:rgba(39,178,139,1);
}
</style>
